<template>
<div style="height: 100%">
  <el-container style="height: 100%">
    <el-aside width="200px" style="width:200px;height:100%;overflow:hidden;">
      <Menu></Menu>
    </el-aside>
    <el-main >
      <h3>线上监控(监控或定时执行用例)</h3>
      <el-table
      :data="moniter_list"
      stripe
      border
      style="min-width: 100%;max-height: 100%"
      >
      <el-table-column
      prop="id"
      label="ID"
      width="120px">
      </el-table-column>
      <el-table-column
      prop="label"
      label="名称"
      width="120px">
      </el-table-column>
      <el-table-column
      prop="pro_ject_id"
      label="项目id"
      width="120px">
      </el-table-column>
       <el-table-column
      label="状态"
      width="100px">
         <template slot-scope="scope">
            <span :style="{color:getColor(scope.row.status)}">{{scope.row.status}}</span>
<!--            <span :style="{color:getColor(scope.row.status)}">{{scope.row.status}}</span>-->
         </template>
      </el-table-column>
      <el-table-column
      prop="step"
      label="待执行时间"
      width="200px ">
        <template slot-scope="scope">
            {{ scope.row.date | dateFormat }}
          </template>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-button @click="add_monitor">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="change_monitor_status(scope.row.id)">开关</el-button>
          <el-button size="mini" type="success" @click="look_report(scope.row.pro_ject_id)">历史报告</el-button>
          <el-button size="mini" type="success" @click="set_monieor(scope.$index)">编辑</el-button>
          <el-button size="mini" type="error" @click="delete_monitor(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-main>
    </el-container>
  <el-dialog :visible.sync="dialogFormVisible" width="90%">
        <el-form :model="from_data">
                <el-form-item label="监控名称" label-width="120px">
                    <el-input v-model="from_data.label"></el-input>
                </el-form-item>
                <el-form-item label="关联项目id" label-width="120px">
                    <el-input v-model="from_data.pro_ject_id"></el-input>
<!--           <el-autocomplete-->
<!--                class="inline-input"-->
<!--                v-model="moniter_list.pro_ject_id"-->
<!--                :fetch-suggestions="querySearch"-->
<!--                placeholder="输入项目id"-->
<!--                @select="handleSelect"-->
<!--                :trigger-on-focus="true"-->
<!--                style="float: left;width: 100%"-->
<!--              >-->
<!--              <template slot-scope="{ item }">-->
<!--              <div style="color: #0a2d8f"><strong>id：{{item.pro_ject_id}}</strong></div>-->
<!--              <span style="color: gray;font-size: xx-small">【标签: {{item.type}}】</span>-->
<!--              <el-divider></el-divider>-->
<!--              </template>-->
<!--           </el-autocomplete>-->
                </el-form-item>

                <el-form-item label="监控方式" label-width="120px">
                    <el-radio-group v-model="from_data.method" @change="set_monitor_next">
                        <el-radio label="间隔时间">间隔(分)</el-radio>
                        <el-radio label="每日定时">每日定时(24小时制如：17:22)</el-radio>
                        <el-radio label="接口触发">接口触发(不可修改)</el-radio>
                        <el-radio label="jenkins语法">jenkins语法</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="设置值" label-width="120px">
                    <el-input v-model="from_data.value" placeholder="请输入对应方式的值"></el-input>
                </el-form-item>

                <el-form-item label="邮件接收地址" label-width="120px">
                    <el-input v-model="from_data.email" placeholder="多个用英文逗号,隔开"></el-input>
                </el-form-item>

                <el-form-item label="机器人" label-width="120px">
                    <el-input v-model="from_data.robot"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="save_monitor">保 存</el-button>
      </div>
  </el-dialog>
  <el-dialog :visible.sync="dialogFormVisible2" width="600px">
    <Report :pro_ject_id="look_report_pro_ject_id" v-if="dialogFormVisible2"></Report>
  </el-dialog>
</div>
</template>
<script>
    import axios from 'axios'
    import Menu from '../components/Menu'
    import Report from '../components/Report'

    export default {
        name: "Monitor",
        data(){
            return{
              dialogFormVisible:false,
              dialogFormVisible2:false,
              look_report_pro_ject_id:'',
              moniter_list:[],
              from_data:{},
              }


        },
        mounted(){
          axios.get('http://localhost:8000/get_monitor_list/:').then(res=>{
          this.moniter_list=res.data
        })},
        methods:{
        handleSelect(item) {
        this.seting_api.host=item.host;
      },
        querySearch(queryString, cb) {
        var pro_ject_id = this.pro_ject_id;
        var results = queryString ? pro_ject_id.filter(this.createFilter(queryString)) : pro_ject_id;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
           getColor(result){
          if(result.toString()=='true'){
            return 'green'
          }else {
            return 'red'
          }
        },
          save_monitor(){
            axios.post('http://localhost:8000/save_monitor/',this.from_data).then(res=>{
              this.moniter_list=res.data
              this.dialogFormVisible=false
            })
          },
          add_monitor(){ axios.get('http://localhost:8000/add_monitor/').then(res=>{
          this.moniter_list=res.data
        })},
          set_monitor_next(form_data){
              console.log(form_data.value)
              this.form_data.value = '';
              if(this.form_data.method == '接口触发')
            {
                this.form_data.value = process.env.VUE_APP_BASE_URL+'/run/?pro_ject_id='+this.form_data.pro_ject_id
              }
            },
          change_monitor_status(id){
                axios.get('http://localhost:8000/change_monitor_status/',{
                    params:{
                        id:id
                    }
                }).then(res=>{
                    this.moniter_list = res.data
                })
            },
          look_report(pro_ject_id){
            this.dialogFormVisible2=true
            this.look_report_pro_ject_id=pro_ject_id},
          set_monieor(index){
            this.dialogFormVisible=true
            this.from_data=this.moniter_list[index]},
          delete_monitor(id){axios.get('http://localhost:8000/delete_monitor/',{params:{id:id}}).then(res=>{this.moniter_list=res.data})}

        },

        components:{
            Menu,
            Report
        }

    }
</script>

<style scoped>
 .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }
  .el-main {
    background-color: white;
    color: #333;
  }
</style>